<template>
	<view class="bg-white">
		<view class="position-fixed top-0 pb-3 b_top"></view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="py-5 px-3 border-bottom mx-3">
					<u-time-line>
						<u-time-line-item nodeTop="2">
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<template v-slot:node>
								<view class="u-node" style="background: #19be6b;">
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">提交提现申请</view>
									<view class="u-order-time mt-2">{{withdraw_detail.formatted_add_time}}</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<template v-slot:node>
								<view class="u-node" v-if="withdraw_detail.status=='await_check'">
									<!-- 此处为uView的icon组件 -->
									<view class="">
										<image src="../../static/images/wallet/process.png" class="process" mode=""></image>
									</view>
								</view>
								<view v-else class="u-node" style="background: #19be6b;">
								</view>
							</template>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view :class="withdraw_detail.status=='await_check'?'u-order-title':'u-order-title'" >待处理</view>
									<view class="u-order-time mt-2">{{withdraw_detail.estimated_check_time}}</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<template  v-slot:node>
								<view v-if="withdraw_detail.status=='finished'" class="u-node" style="background: #19be6b;">
								</view>
								<view v-else class="u-node">
								</view>
							</template>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-title" :class="withdraw_detail.status=='finished'?'u-order-title':'u-order-desc'">到账成功</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
			</view>
			<view class="mx-3 mt-2">
				<view class="py-1 d-flex j-sb">
					<view class="text-999">提现金额</view>
					<view class="font-weight">￥{{withdraw_detail.amount}}</view>
				</view>
				<view class="">
					<view class="py-1 d-flex j-sb" v-if="bank=='bank'">
						<view class="text-999">到账银行卡</view>
						<view class="font-weight">{{withdraw_detail.link_withdraw_way.bank_name+'('+withdraw_detail.link_withdraw_way.bank_card.substr(withdraw_detail.link_withdraw_way.bank_card.length-4)+')'}}</view>
					</view>
					<view class="py-1 d-flex j-sb" v-else>
						<view class="text-999">会员提现</view>
						<view class="font-weight">{{withdraw_detail.link_withdraw_way.bank_name}}</view>
					</view>
				</view>
				<view class="" v-if="withdraw_detail.label_status=='已完成'">
					<view class="py-1 d-flex j-sb">
						<view class="text-999">商家回复</view>
						<view class="font-weight">{{withdraw_detail.review_content}}</view>
					</view>
					<view class="py-1 d-flex j-sb" v-if="withdraw_detail.certificate_img">
						<view class="text-999">转账凭证</view>
						<view class="flex-1 text-right" >
							<image  :src="withdraw_detail.certificate_img" class="dscmall-logo" mode="" @click="previewImage(withdraw_detail.certificate_img)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="full w-100">
				<button type="warn" @click="next_sub">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				withdraw_detail:"",
				bank:"",
				u_loadmore:true, // 加载中
			}
		},
		methods:{
			next_sub(){
				uni.navigateBack({
					delta:1
				})
			},
			// 预览图片
			previewImage(url){
				let photoList = [];
				photoList.push(url);
				uni.previewImage({
					current: 0,
				    urls: photoList // 图片路径必须是一个数组
				});	
			}
		},
		onLoad(e) {
			this.$H.post("v2/store/withdraw/detail",{
				log_id:e.log_id
			}).then(res=>{
				this.withdraw_detail=res.data
				this.bank=this.withdraw_detail.link_withdraw_way.bank_type
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.u-node {
		height: 20rpx;
		width: 20rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	.process{
		width: 50upx;
		height: 50upx;
	}
	.full{
		display: flex;
		justify-content: center;
	}
	.full /deep/ button::after{
		border: none;
	}
	.full /deep/ button{
		width: 35%;
		color: #FF0000;
		background-image: linear-gradient(#ffe6e6,#ffe6e6);
		border-radius: 50upx;
		position: absolute;
		bottom: 5%;
	}
	.dscmall-logo{
		width: 50upx;
		height: 50upx;
	}
</style>
